<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI交底书查新工具</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#f0f9ff',
                            100: '#e0f2fe',
                            200: '#bae6fd',
                            300: '#7dd3fc',
                            400: '#38bdf8',
                            500: '#0ea5e9',
                            600: '#0284c7',
                            700: '#0369a1',
                            800: '#075985',
                            900: '#0c4a6e',
                        }
                    }
                }
            }
        }
    </script>
    <style>
        body {
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
        }
        .gradient-bg {
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
        }
        .card-hover:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
        }
        .upload-area { transition: all 0.3s ease; }
        .upload-area:hover { border-color: #0284c7; background-color: #f0f9ff; }
        .upload-area.dragover { border-color: #0284c7; background-color: #e0f2fe; transform: scale(1.02); }
        .progress-bar { transition: width 0.3s ease; }
        .status-badge {
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 500;
        }
        .status-draft { background-color: #e5e7eb; color: #4b5563; }
        .status-progress { background-color: #fef3c7; color: #92400e; }
        .status-completed { background-color: #d1fae5; color: #065f46; }
        .status-searching { background-color: #dbeafe; color: #1d4ed8; }
        
        .tab-button {
            color: #6b7280;
            background-color: transparent;
        }

        .tab-button.tab-active {
            color: #5d92de;
            background-color: rgb(255, 255, 255);
            box-shadow: 0 1px 3px 0 rgba(150, 122, 249, 0.5), 0 1px 2px 0 rgba(151, 125, 246, 0.06);
        }

        .tab-button:hover:not(.tab-active) {
            color: #374151;
            background-color: rgba(233, 229, 248, 0.5);
        }

        .disclosure-item.selected {
            border-color: #3b82f6;
            background-color: #eff6ff;
            box-shadow: 0 0 0 1px #3b82f6;
        }

        .upload-area.dragover {
            border-color: #3b82f6;
            background-color: #eff6ff;
            transform: scale(1.01);
        }

        .status-completed {
            background-color: #dcfce7;
            color: #166534;
        }

        .status-progress {
            background-color: #dbeafe;
            color: #1d4ed8;
        }

        .status-draft {
            background-color: #f3f4f6;
            color: #374151;
        }
    </style>
</head>
<body class="bg-gray-50 text-black">
    <!-- 主面板 -->
    <div class="flex h-screen overflow-hidden">
        <!-- 左侧边栏 -->
        <div class="w-96 bg-gradient-to-b from-white to-gray-50 shadow-lg flex flex-col h-full border-r border-gray-200">
            <!-- 顶部标题区域 -->
            <div class="p-6 border-b border-gray-100 bg-white">
                <div class="flex items-center space-x-3 mb-6">
                    <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-blue-600 rounded-xl flex items-center justify-center">
                        <i class="ri-search-2-line text-white text-lg"></i>
                    </div>
                    <div>
                        <h2 class="text-lg font-semibold text-gray-900">查新档案</h2>
                    </div>
                </div>
                
                <!-- 搜索框 -->
                <div class="relative">
                    <input type="text" placeholder="搜索查新档案记录..." 
                           class="w-full pl-10 pr-4 py-3 bg-gray-50 border border-gray-300 rounded-xl text-sm 
                                  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent 
                                  focus:bg-white transition-all duration-200">
                    <i class="ri-search-line absolute left-3 top-3.5 text-gray-400 text-sm"></i>
                    <button class="absolute right-3 top-3 text-gray-400 hover:text-gray-600 transition-colors">
                        <i class="ri-filter-3-line text-sm"></i>
                    </button>
                </div>
            </div>

            <!-- 历史查新报告列表 -->
            <div class="flex-1 overflow-y-auto px-6">
                <div class="space-y-3 max-w-6xl">
                    <!-- 查新报告项目 1 -->
                    <div class="group bg-white rounded-xl border border-gray-300 hover:border-blue-300 
                                hover:shadow-md transition-all duration-200 cursor-pointer overflow-visible" 
                         onclick="showSearchResult(1)">
                        <div class="p-4">
                            <!-- 第一行：标题和操作按钮 -->
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="font-semibold text-gray-900 text-sm truncate group-hover:text-blue-700 
                                           transition-colors flex-1 mr-2">智能语音识别系统查新</h3>
                                <div class="relative">
                                    <button class="p-1 text-gray-400 hover:text-gray-600 transition-colors" 
                                            onclick="event.stopPropagation(); toggleDropdown(this)">
                                        <i class="ri-more-2-line text-lg"></i>
                                    </button>
                                    <!-- 下拉菜单 -->
                                    <div class="absolute right-0 top-full mt-1 w-32 bg-white border border-gray-200 
                                                rounded-lg shadow-lg z-50 hidden">
                                        <!-- <button class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 
                                                       flex items-center" onclick="event.stopPropagation(); downloadFile()">
                                            <i class="ri-download-line mr-2"></i>下载
                                        </button> -->
                                        <button class="w-full px-3 py-2 text-left text-sm text-red-600 hover:bg-red-50 
                                                       flex items-center" onclick="event.stopPropagation(); deleteFile()">
                                            <i class="ri-delete-bin-line mr-2"></i>删除
                                        </button>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 第二行：时间和状态 -->
                            <div class="flex items-center justify-between text-xs">
                                <span class="flex items-center text-gray-500">
                                    <i class="ri-calendar-line mr-1"></i>
                                    2024-01-18
                                </span>
                                <span class="status-badge status-completed">已完成</span>
                            </div>
                        </div>
                    </div>

                    <!-- 查新报告项目 2 -->
                    <div class="group bg-white rounded-xl border border-gray-300 hover:border-green-300 
                                hover:shadow-md transition-all duration-200 cursor-pointer overflow-visible" 
                         onclick="showSearchResult(2)">
                        <div class="p-4">
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="font-semibold text-gray-900 text-sm truncate group-hover:text-green-700 
                                           transition-colors flex-1 mr-2">区块链数据存储查新</h3>
                                <div class="relative">
                                    <button class="p-1 text-gray-400 hover:text-gray-600 transition-colors" 
                                            onclick="event.stopPropagation(); toggleDropdown(this)">
                                        <i class="ri-more-2-line text-lg"></i>
                                    </button>
                                    <div class="absolute right-0 top-full mt-1 w-32 bg-white border border-gray-200 
                                                rounded-lg shadow-lg z-50 hidden">
                                        <!-- <button class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 
                                                       flex items-center" onclick="event.stopPropagation(); downloadFile()">
                                            <i class="ri-download-line mr-2"></i>下载
                                        </button> -->
                                        <button class="w-full px-3 py-2 text-left text-sm text-red-600 hover:bg-red-50 
                                                       flex items-center" onclick="event.stopPropagation(); deleteFile()">
                                            <i class="ri-delete-bin-line mr-2"></i>删除
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-center justify-between text-xs">
                                <span class="flex items-center text-gray-500">
                                    <i class="ri-calendar-line mr-1"></i>
                                    2024-01-20
                                </span>
                                <span class="status-badge status-searching">查新中</span>
                            </div>
                        </div>
                    </div>

                    <!-- 查新报告项目 3 -->
                    <div class="group bg-white rounded-xl border border-gray-300 hover:border-purple-300 
                                hover:shadow-md transition-all duration-200 cursor-pointer overflow-visible" 
                         onclick="showSearchResult(3)">
                        <div class="p-4">
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="font-semibold text-gray-900 text-sm truncate group-hover:text-purple-700 
                                           transition-colors flex-1 mr-2">机器学习算法查新</h3>
                                <div class="relative">
                                    <button class="p-1 text-gray-400 hover:text-gray-600 transition-colors" 
                                            onclick="event.stopPropagation(); toggleDropdown(this)">
                                        <i class="ri-more-2-line text-lg"></i>
                                    </button>
                                    <div class="absolute right-0 top-full mt-1 w-32 bg-white border border-gray-200 
                                                rounded-lg shadow-lg z-50 hidden">
                                        <!-- <button class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 
                                                       flex items-center" onclick="event.stopPropagation(); downloadFile()">
                                            <i class="ri-download-line mr-2"></i>下载
                                        </button> -->
                                        <button class="w-full px-3 py-2 text-left text-sm text-red-600 hover:bg-red-50 
                                                       flex items-center" onclick="event.stopPropagation(); deleteFile()">
                                            <i class="ri-delete-bin-line mr-2"></i>删除
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-center justify-between text-xs">
                                <span class="flex items-center text-gray-500">
                                    <i class="ri-calendar-line mr-1"></i>
                                    2024-01-25
                                </span>
                                <span class="status-badge status-searching">查新中</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 加载更多按钮 -->
                <div class="mt-4 text-center">
                    <button class="px-4 py-2 text-sm text-gray-600 hover:text-blue-600 hover:bg-blue-50 
                                   rounded-lg transition-colors flex items-center justify-center mx-auto">
                        <i class="ri-refresh-line mr-2"></i>
                        加载更多
                    </button>
                </div>
            </div>

            <!-- 底部统计信息 -->
            <div class="px-6 py-4 bg-white border-t border-gray-200">
                <div class="grid grid-cols-3 gap-4 text-center">
                    <div>
                        <div class="text-lg font-semibold text-blue-600">8</div>
                        <div class="text-xs text-gray-500">总查新</div>
                    </div>
                    <div>
                        <div class="text-lg font-semibold text-green-600">5</div>
                        <div class="text-xs text-gray-500">已完成</div>
                    </div>
                    <div>
                        <div class="text-lg font-semibold text-yellow-600">3</div>
                        <div class="text-xs text-gray-500">进行中</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 右侧内容区 -->
        <div class="flex-1 overflow-y-auto bg-gray-50">
            <!-- 新建查新页 -->
            <div class="px-6 py-8 bg-white border-b border-gray-100">
                <div class="px-6 bg-white border-b border-gray-100">
                    <!-- 说明文字 -->
                    <div class="mb-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-2">新建查新</h3>
                        <p class="text-gray-600 text-sm">请选择交底书文件，AI将进行专利查新分析，生成详细的查新报告。</p>
                    </div>
                    
                    <!-- 标签页设计 -->
                    <div class="bg-white p-1 rounded-lg mb-6 inline-flex hidden">
                        <button id="textTab" class="tab-button tab-active flex items-center px-4 py-2 text-sm font-medium rounded-md transition-all duration-200">
                            <i class="ri-history-line mr-2"></i>
                            <span>选择交底书</span>
                        </button>
                        <button id="fileTab" class="tab-button flex items-center px-4 py-2 text-sm font-medium rounded-md transition-all duration-200">
                            <i class="ri-upload-2-line mr-2"></i>
                            <span>上传交底书</span>
                        </button>
                    </div>
                     
                    <!-- 历史交底书列表 -->
                    <h3 class="px-4 py-4 text-sm font-medium rounded-md">选择交底书</h3>
                    <div id="disclosureList" class="h-96 overflow-y-auto border border-gray-200 rounded-xl p-4 bg-white">
                        <!-- 显示搜索交底书框和交底书总数 -->
                        <div class="flex justify-between items-center mb-4">
                            <div class="relative">
                                <input type="text" id="searchInput" placeholder="搜索交底书档案记录..."
                                    class="w-full pl-10 pr-4 py-3 bg-gray-50 border border-gray-300 rounded-xl text-sm 
                                            placeholder-gray-400 focus:outline-none focus:border-purple-500">
                                <i class="ri-search-line absolute top-1/2 transform -translate-y-1/2 left-4 text-gray-400"></i>
                            </div>
                            <span id="totalDisclosures" class="text-sm text-gray-500">共 10 条记录</span>
                        </div>
                        <div class="space-y-3 overflow-y-auto">
                            <div class="disclosure-item group p-4 rounded-xl border-2 border-gray-200 hover:border-blue-300 hover:bg-blue-50 cursor-pointer transition-all duration-200">
                                <div class="flex items-center">
                                    <div class="flex-1">
                                        <div class="flex items-center justify-between mb-1">
                                            <h5 class="text-sm font-medium text-gray-900">智能语音识别系统</h5>
                                            <span class="text-xs bg-green-100 text-green-700 px-2 py-1 rounded-full">我创建的</span>
                                        </div>
                                        <p class="text-xs text-gray-500">创建时间：2024-01-15</p>
                                    </div>
                                    <div class="opacity-0 group-hover:opacity-100 transition-opacity">
                                        <i class="ri-arrow-right-s-line text-gray-400"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="disclosure-item group p-4 rounded-xl border-2 border-gray-200 hover:border-blue-300 hover:bg-blue-50 cursor-pointer transition-all duration-200">
                                <div class="flex items-center">
                                    <div class="flex-1">
                                        <div class="flex items-center justify-between mb-1">
                                            <h5 class="text-sm font-medium text-gray-900">区块链数据存储方法</h5>
                                            <span class="text-xs bg-green-100 text-green-700 px-2 py-1 rounded-full">我创建的</span>
                                        </div>
                                        <p class="text-xs text-gray-500">创建时间：2024-01-20</p>
                                    </div>
                                    <div class="opacity-0 group-hover:opacity-100 transition-opacity">
                                        <i class="ri-arrow-right-s-line text-gray-400"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="disclosure-item group p-4 rounded-xl border-2 border-gray-200 hover:border-blue-300 hover:bg-blue-50 cursor-pointer transition-all duration-200">
                                <div class="flex items-center">
                                    <div class="flex-1">
                                        <div class="flex items-center justify-between mb-1">
                                            <h5 class="text-sm font-medium text-gray-900">机器学习算法优化</h5>
                                            <span class="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded-full">他人分享的</span>
                                        </div>
                                        <div class="flex items-center space-x-4">
                                            <p class="text-xs text-gray-500">创建时间：2024-01-25</p>
                                            <p class="text-xs text-gray-500">分享人：XXX账号</p>
                                        </div>
                                    </div>
                                    <div class="opacity-0 group-hover:opacity-100 transition-opacity">
                                        <i class="ri-arrow-right-s-line text-gray-400"></i>
                                    </div>
                                </div>
                            </div>

                            <div class="disclosure-item group p-4 rounded-xl border-2 border-gray-200 hover:border-blue-300 hover:bg-blue-50 cursor-pointer transition-all duration-200">
                                <div class="flex items-center">
                                    <div class="flex-1">
                                        <div class="flex items-center justify-between mb-1">
                                            <h5 class="text-sm font-medium text-gray-900">机器学习算法优化</h5>
                                            <span class="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded-full">他人分享的</span>
                                        </div>
                                        <div class="flex items-center space-x-4">
                                            <p class="text-xs text-gray-500">创建时间：2024-01-25</p>
                                            <p class="text-xs text-gray-500">分享人：XXX账号</p>
                                        </div>
                                    </div>
                                    <div class="opacity-0 group-hover:opacity-100 transition-opacity">
                                        <i class="ri-arrow-right-s-line text-gray-400"></i>
                                    </div>
                                </div>
                            </div>

                            <div class="disclosure-item group p-4 rounded-xl border-2 border-gray-200 hover:border-blue-300 hover:bg-blue-50 cursor-pointer transition-all duration-200">
                                <div class="flex items-center">
                                    <div class="flex-1">
                                        <div class="flex items-center justify-between mb-1">
                                            <h5 class="text-sm font-medium text-gray-900">机器学习算法优化</h5>
                                            <span class="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded-full">他人分享的</span>
                                        </div>
                                        <div class="flex items-center space-x-4">
                                            <p class="text-xs text-gray-500">创建时间：2024-01-25</p>
                                            <p class="text-xs text-gray-500">分享人：XXX账号</p>
                                        </div>
                                    </div>
                                    <div class="opacity-0 group-hover:opacity-100 transition-opacity">
                                        <i class="ri-arrow-right-s-line text-gray-400"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 文件上传区域 -->
                    <div id="uploadArea" class="hidden">
                        <div class="upload-area border-2 border-dashed border-gray-300 rounded-xl p-8 text-center bg-gray-50 hover:bg-blue-50 transition-all duration-200">
                            <div class="mb-4">
                                <i class="ri-upload-cloud-2-line text-4xl text-gray-400"></i>
                            </div>
                            <h4 class="text-lg font-medium text-gray-900 mb-2">上传交底书文件</h4>
                            <p class="text-sm text-gray-500 mb-4">支持 PDF、DOC、DOCX 格式，文件大小不超过 10MB</p>
                            <div class="flex justify-center space-x-4">
                                <button class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                                    <i class="ri-folder-open-line mr-2"></i>
                                    选择文件
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 查新配置选项 -->
                    <!-- <div class="mt-8">
                        <h4 class="text-md font-medium text-gray-900 mb-4">查新配置</h4>
                        <div class="grid grid-cols-2 gap-4">
                            <div class="p-4 border border-gray-200 rounded-lg">
                                <label class="flex items-center">
                                    <input type="checkbox" class="mr-3 text-blue-600" checked>
                                    <span class="text-sm text-gray-700">国内专利检索</span>
                                </label>
                            </div>
                            <div class="p-4 border border-gray-200 rounded-lg">
                                <label class="flex items-center">
                                    <input type="checkbox" class="mr-3 text-blue-600" checked>
                                    <span class="text-sm text-gray-700">国际专利检索</span>
                                </label>
                            </div>
                            <div class="p-4 border border-gray-200 rounded-lg">
                                <label class="flex items-center">
                                    <input type="checkbox" class="mr-3 text-blue-600">
                                    <span class="text-sm text-gray-700">学术文献检索</span>
                                </label>
                            </div>
                            <div class="p-4 border border-gray-200 rounded-lg">
                                <label class="flex items-center">
                                    <input type="checkbox" class="mr-3 text-blue-600">
                                    <span class="text-sm text-gray-700">技术标准检索</span>
                                </label>
                            </div>
                        </div>
                    </div> -->
                    
                    <!-- 开始查新按钮 -->
                    <div class="mt-6 pt-4 border-t border-gray-200">
                        <button class="w-full bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-all duration-200 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center group" id="create-btn">
                            <i class="ri-magic-line mr-2 group-hover:animate-spin"></i>
                            <span>开始查新检索</span>
                            <i class="ri-arrow-right-line ml-2 group-hover:translate-x-1 transition-transform"></i>
                        </button>
                        <!-- <p class="text-xs text-gray-500 text-center mt-2">请先选择一个交底书或上传文件</p> -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 标签页切换
        document.getElementById('textTab').addEventListener('click', function() {
            this.classList.add('tab-active');
            document.getElementById('fileTab').classList.remove('tab-active');
            document.getElementById('disclosureList').classList.remove('hidden');
            document.getElementById('uploadArea').classList.add('hidden');
        });

        document.getElementById('fileTab').addEventListener('click', function() {
            this.classList.add('tab-active');
            document.getElementById('textTab').classList.remove('tab-active');
            document.getElementById('disclosureList').classList.add('hidden');
            document.getElementById('uploadArea').classList.remove('hidden');
        });

        document.getElementById('create-btn').addEventListener('click', function() {
            // 在这里添加开始查新的逻辑
            window.location.href = 'chaxin.html';
        });

        // 下拉菜单切换
        function toggleDropdown(button) {
            const dropdown = button.nextElementSibling;
            const allDropdowns = document.querySelectorAll('.absolute.right-0.top-full');
            
            allDropdowns.forEach(d => {
                if (d !== dropdown) {
                    d.classList.add('hidden');
                }
            });
            
            dropdown.classList.toggle('hidden');
        }

        // 点击外部关闭下拉菜单
        document.addEventListener('click', function(e) {
            if (!e.target.closest('.relative')) {
                document.querySelectorAll('.absolute.right-0.top-full').forEach(d => {
                    d.classList.add('hidden');
                });
            }
        });

        // 文件操作函数
        function downloadFile() {
            console.log('下载文件');
        }

        function deleteFile() {
            console.log('删除文件');
        }

        // 显示查新结果
        function showSearchResult(id) {
            console.log('显示查新结果:', id);
            // 这里可以跳转到查新结果页面
            window.location.href = 'compare1.html';
        }
    </script>
</body>
</html>